<!-- 课程介绍 -->
<template>
	<view class="center column">
		<!-- 课程介绍长图 -->
		<image mode="widthFix" @load="load"	lazy-load
			v-for="(url, index) in detailUrls" :key="index" :src="url"
		>
		</image>
		<!-- 正在加载图片 -->
		<image v-if="loading" class="loading" src="/static/images/loading.gif"></image>
		
		<text v-else class="footer-text">已经到达底部，没有更多内容了</text>
	</view>
</template>

<script>
	
	export default {
		
		props: {
			detailUrls: {
				type: Array
			}
		},
		
		data() {
			return {
				loading: true, //是否加载中
			}
		},
		
		methods: {
			load() {
				this.loading = false // 图片加载完
			}
		}
	}
	
</script>

<style >
	image {
		width: 100%;
	}
	
	.loading {
		height: 90rpx;
		width: 90rpx;
		margin-top: 50rpx;
	}
	.footer-text {
		font-size: 30rpx;
		color: #777;
		margin: 20rpx 0;
	}
</style>
